<template>
  <div class="p-10 w-full h-full flex flex-col justify-center items-center gap-4">
    <input
      type="text"
      placeholder="用户名"
      v-model="loginInfo.user"
      class="input input-bordered input-primary w-full max-w-xs"
    />
    <input
      type="password"
      placeholder="密码"
      v-model="loginInfo.password"
      class="input input-bordered input-primary w-full max-w-xs"
    />
    <button class="btn btn-primary shadow-xl" @click="handleLogin">登录</button>
    {{ logResponse }}
    <div v-if="userInfo.userName">用户名:{{ userInfo.userName }},姓名:{{ userInfo.realName }}</div>
  </div>
</template>

<script setup>
// 使用setup后,声明的变量就可以再模板中直接使用了,不用 export deafult{}
import { ref, getCurrentInstance, reactive } from "vue";
import axios from "axios";

// !使用全局变量
const { proxy } = getCurrentInstance();
const BASE_URL = proxy.BASE_URL;
const api = BASE_URL + "?action=LoginCustomer";
// console.log();

const loginInfo = reactive({
  user: 'aaa',
  password: 'bbb',
});
// const userName = ref("aaa");
// const password = ref("bbb");
// 服务器响应
const logResponse = ref("");
const userInfo = ref({});

// ? 如果使用了下面的声明,不能通过 userInfo = xxx 进行整体覆盖,这会导致失去响应
// const userInfo = reactive({});

const handleLogin = async () => {
  const { data } = await axios.post(api, loginInfo);
  if (!data.success) {
    logResponse.value = data.msg;
    return;
  }

  userInfo.value = data.userInfo;

  logResponse.value = "登录成功";
};

// ? 使用<script setup>后,下面的代码可以省略了
// export default {
//   setup() {
//     return { count, obj, handleClick };
//   },
// };
</script>

<style>
</style>